<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        position:absolute;
        left:0;
        width:100px;
        height:100px;
        background-color:pink;
    }
    span{
        position:absolute;
        left:0;
        top:200px;
        width:200px;
        height:200px;
        background-color:green;
    }
</style>

<body>
    <button>点击开始动画</button>
    <div></div>
    <span></span>
    <script>
        //1、通过一个函数封装一下
        // function animation(obj, target) {  //obj是目标对象  target是目标位置
        //     var timer = setInterval(function () {
        //         //加个判断条件，让它停下来
        //         if (obj.offsetLeft >= target) {
        //             clearInterval(timer)
        //         } else {
        //             obj.style.left = obj.offsetLeft + 5 + 'px';
        //         }
        //     }, 30)
        // }

        //要想实现两个元素的动画
        //先获取元素
        // var div = document.querySelector('div')
        // var span = document.querySelector('span')
        // //想要div实现动画，调用动画函数
        // animation(div,400)  //对div来实现动画函数，在400像素的时候动画停止
        // animation(span,600)

        //2、函数的优化
        //给不同的元素指定不同的定时器，减少歧义
        //只需要把var替换成obj就可以，提高性能
        // function animation(obj, target) {  //obj是目标对象  target是目标位置
        //     obj.timer = setInterval(function () {
        //         //加个判断条件，让它停下来
        //         if (obj.offsetLeft >= target) {
        //             clearInterval(obj.timer)
        //         } else {
        //             obj.style.left = obj.offsetLeft + 5 + 'px';
        //         }
        //     }, 30)
        // }


        //3、存在的bug 点击按钮的时候动画越来越快
        //解决方案：先清除之前的定时器，只保留当前的一个定时器执行
        function animation(obj, target) {  //obj是目标对象  target是目标位置
            clearInterval(obj.timer)
            obj.timer = setInterval(function () {
                //加个判断条件，让它停下来
                if (obj.offsetLeft >= target) {
                    clearInterval(obj.timer)
                } else {
                    obj.style.left = obj.offsetLeft + 5 + 'px';
                }
            }, 30)
        }
        var btn = document.querySelector('button');
        var span = document.querySelector('span')
        btn.addEventListener('click',function(){
            animation(span,500)
        })


    </script>
</body>

</html>